<template>
  <div style="padding: 0 2px">
    <template v-if="auth === 'edit'">
      <a-input v-model="innerValue" :placeholder="fieldConfig.placeholder"/>
    </template>
    <template v-else>
      <div style="padding: 5px">
        {{ title || value }}
      </div>
    </template>
  </div>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'InputField',
  props: {
    fieldConfig: createProps(Object),
    value: createProps(String),
    title: createProps(String),
    auth: createProps(String)
  },
  computed: {
    innerValue: {
      get() {
        return this.value || this.title;
      },
      set(v) {
        this.$emit('update:value', v);
        this.$emit('update:title', v);
      },
    }
  }
};
</script>